import { ref, onMounted, reactive, unref, watch } from "vue"
//存储登录时候的id,用户名和用户等级
import { useUserStore } from "../../../stores/useUserStore"
//导入element-plus 提示框
import { ElMessage } from "element-plus"
import axios from "axios"
export const MyUser = () => {
  const UserStore = useUserStore()
  //存储所有用户信息
  const user = ref([])
  //存储普通用户信息
  const commonUser = ref([])
  //存储交管信息
  const trafficUser = ref([])
  const sizeUser = ref(10)
  const pageUser = ref(1)
  //修改密码的显示隐藏
  const dialogTableVisible = ref(false)
  //接收修改密码的input
  const newForm = reactive({
    username: "",
    password: "",
  })

  //接收点击修改时的数据
  const click = reactive({
    clickid: "",
    clickname: "",
    clickpassword: "",
    clicktype: "",
    clickonlinestatus: "",
    clickother: "",
  })
  //接收修改密码input框的表单验证
  const FormRules = reactive({
    username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
    password: [
      {
        required: true,
        message: "请输入密码",
        trigger: "blur",
      },
    ],
  })
  //表单验证
  const FormUpdate = ref()

  function handleSizeUser(val) {
    pageUser.value = 1
    sizeUser.value = val
  }
  function handleCurrentUser(val) {
    pageUser.value = val
  }
  //获取普通用户或交管用户数据
  function getFetchUsers() {
    axios.get("http://localhost:3000/ggusers").then((res) => {
      user.value = res.data.result.dataA
      commonUser.value = user.value.filter(function (item, index) {
        return item.user_type == "common"
      })
      // console.log("普通用户", commonUser.value)
      trafficUser.value = user.value.filter(function (item, index) {
        return item.user_type == "traffic"
      })
      // console.log("交管用户", trafficUser.value)
    })
  }
  //判断是升交管还是降普通
  function handleRise(name) {
    // console.log("点击生交管",name);
    axios.get(`http://localhost:3000/ggusers/${name}`).then((res) => {
      console.log(res)
      const user_id = res.data.result.user_id
      const user_name = res.data.result.user_name
      const user_password = res.data.result.user_password
      const user_type = res.data.result.user_type
      const user_onlinestatus = res.data.result.user_onlinestatus
      const user_other = res.data.result.user_other
      if (user_type == "common" && user_other == "1") {
        axios
          .put(`http://localhost:3000/ggusers/${user_id}`, {
            user_name,
            user_password,
            user_type: "traffic",
            user_onlinestatus,
            user_other,
          })
          .then((res) => {
            console.log(res)
            getFetchUsers()
            ElMessage({ message: user_name + "升交管成功", type: "success" })
          })
      } else if (user_type == "traffic" && user_other == "1") {
        axios
          .put(`http://localhost:3000/ggusers/${user_id}`, {
            user_name,
            user_password,
            user_type: "common",
            user_onlinestatus,
            user_other,
          })
          .then((res) => {
            console.log(res)
            getFetchUsers()
            ElMessage({ message: user_name + "降普通成功", type: "success" })
          })
      } else {
        ElMessage.error(user_name + "处于删除状态")
      }
    })
  }
  //点击修改弹出弹框
  function handleUpdata(name, password) {
    dialogTableVisible.value = true
    newForm.username = name
    newForm.password = password
    //发送请求拿到username
    axios.get(`http://localhost:3000/ggusers/${name}`).then((res) => {
      click.clickid = res.data.result.user_id
      click.clickname = res.data.result.user_name
      click.clickpassword = res.data.result.user_password
      click.clicktype = res.data.result.user_type
      click.clickonlinestatus = res.data.result.user_onlinestatus
      click.clickother = res.data.result.user_other
    })
  }
  //点击修改密码
  function handleUpdataPassword() {
    const form = unref(FormUpdate)
    if (!form) return
    //整体表单验证
    form.validate((valid) => {
      if (valid) {
        //检测成功
        //获取全部,判断用户名是否重复
        axios
          .put(`http://localhost:3000/ggusers/${click.clickid}`, {
            user_name: newForm.username,
            user_password: newForm.password,
            user_type: click.clicktype,
            user_onlinestatus: click.clickonlinestatus,
            user_other: click.clickother,
          })
          .then((res) => {
            console.log(res, "修改成功")
            getFetchUsers()
            ElMessage({ message: "修改成功", type: "success" })
            dialogTableVisible.value = false
          })
      }
    })
  }
  //点击控制下线
  function handleExit(name) {
    axios.get(`http://localhost:3000/ggusers/${name}`).then((res) => {
      console.log(res)
      const user_id = res.data.result.user_id
      const user_name = res.data.result.user_name
      const user_password = res.data.result.user_password
      const user_type = res.data.result.user_type
      const user_onlinestatus = res.data.result.user_onlinestatus
      const user_other = res.data.result.user_other
      if (user_other == "0") {
        ElMessage.error(name + "处于删除状态")
      } else {
        if (user_onlinestatus == "1") {
          axios
            .put(`http://localhost:3000/ggusers/${user_id}`, {
              user_name,
              user_password,
              user_type,
              user_onlinestatus: "0",
              user_other,
            })
            .then((res) => {
              console.log(res)
              getFetchUsers()
              ElMessage({ message: "该用户已下线", type: "success" })
            })
        } else {
          ElMessage.error("该用户不在线")
        }
      }
    })
  }

  //实现搜索
  //接收搜索框的内容
  const userSearch = ref("")
  const filterUser = ref([])
  //普通用户页
  watch(userSearch, (newWords, oldWprds) => {
    if (newWords == "") {
      filterUser.value = []
      getFetchUsers()
    } else {
      filterUser.value = []
      commonUser.value.filter((item) => {
        console.log(item)
        if ("user_name" in item) {
          if (
            item.user_name
              .toUpperCase()
              .indexOf(userSearch.value.toUpperCase()) > -1
          ) {
            filterUser.value.push(item)
          }
        }
      })
      commonUser.value = filterUser.value
      filterUser.value = []
    }
  })
  //交管用户页
  watch(userSearch, (newWords, oldWprds) => {
    if (newWords == "") {
      filterUser.value = []
      getFetchUsers()
    } else {
      filterUser.value = []
      trafficUser.value.filter((item) => {
        if ("user_name" in item) {
          if (
            item.user_name
              .toUpperCase()
              .indexOf(userSearch.value.toUpperCase()) > -1
          ) {
            filterUser.value.push(item)
          }
        }
      })
      trafficUser.value = filterUser.value
      filterUser.value = []
    }
  })

  //登录状态开关的回调
  function handleOnlinestatusChange(row) {
    const name = row.user_name
    axios.get(`http://localhost:3000/ggusers/${name}`).then((res) => {
      const user_id = res.data.result.user_id
      const user_name = res.data.result.user_name
      const user_password = res.data.result.user_password
      const user_type = res.data.result.user_type
      const user_onlinestatus = res.data.result.user_onlinestatus
      const user_other = res.data.result.user_other
      console.log(res)
      if (user_onlinestatus == "1" && user_other == "1") {
        axios
          .put(`http://localhost:3000/ggusers/${user_id}`, {
            user_name,
            user_password,
            user_type,
            user_onlinestatus: "0",
            user_other,
          })
          .then((res) => {
            console.log(res)
            ElMessage({ message: "该用户已下线", type: "success" })
          })
      } else if (user_onlinestatus == "0" && user_other == "1") {
        axios
          .put(`http://localhost:3000/ggusers/${user_id}`, {
            user_name,
            user_password,
            user_type,
            user_onlinestatus: "1",
            user_other,
          })
          .then((res) => {
            console.log(res)
            ElMessage({ message: "该用户已上线", type: "success" })
          })
      } else {
        ElMessage.error(user_name + "处于删除状态")
      }
    })
  }
  //控制账号状态额回调
  function handleOtherChange(row) {
    const name = row.user_name
    axios.get(`http://localhost:3000/ggusers/${name}`).then((res) => {
      const user_id = res.data.result.user_id
      const user_name = res.data.result.user_name
      const user_password = res.data.result.user_password
      const user_type = res.data.result.user_type
      const user_onlinestatus = res.data.result.user_onlinestatus
      const user_other = res.data.result.user_other
      console.log(res)
      if (user_other == "1") {
        axios
          .put(`http://localhost:3000/ggusers/${user_id}`, {
            user_name,
            user_password,
            user_type,
            user_onlinestatus,
            user_other: "0",
          })
          .then((res) => {
            console.log(res)
            ElMessage({ message: "该用户已删除", type: "success" })
          })
      } else if (user_other == "0") {
        axios
          .put(`http://localhost:3000/ggusers/${user_id}`, {
            user_name,
            user_password,
            user_type,
            user_onlinestatus,
            user_other: "1",
          })
          .then((res) => {
            console.log(res, "激活成功嘛")
            ElMessage({ message: "该用户已激活", type: "success" })
          })
      }
    })
  }
  onMounted(() => {
    getFetchUsers()
  })
  return {
    user,
    commonUser,
    trafficUser,
    getFetchUsers,
    sizeUser,
    pageUser,
    handleSizeUser,
    handleCurrentUser,
    handleRise,
    handleUpdata,
    dialogTableVisible,
    newForm,
    handleUpdataPassword,
    FormRules,
    FormUpdate,
    handleExit,
    userSearch,
    handleOnlinestatusChange,
    handleOtherChange,
  }
}
